/**
* Created by ren on 2016/12/27.
*/
<template>
  <div class='forgetPwd register'>
    <div class="container">
      <img src="./assets/logo3.png" alt="" class="logo3">
      <div class="row">
        <div class="con">
          <div class="title">忘记密码</div>
          <div class="input-group input-group-lg">
            <span class="input-group-addon" style="background-color: #fff;border-radius: 0px;"><img
              src="./assets/index/mobile_login.png" width="13"> </span>
            <input type="text" id="telephone" class="form-control" v-model="telephone" placeholder="请输入手机号码"
                   style="font-size: 16px;padding: 5px 10px;border-radius: 0px;">
          </div>
          <div class="input-group input-group-lg imgcode">
                        <span class="input-group-addon" style="background-color: #fff;border-radius: 0px;"> <img
                          src="./assets/index/sms.png" width="15"></span>
            <input type="text" id="verifyImgCode" v-model="imgCode" class="form-control" placeholder="请输入验证码"
                   style="font-size: 16px;padding: 5px 10px;border-radius: 0px;">
            <div class="img-code">
              <img v-lazy="getImgCode(imgcodeUrl)" id="imgCode">
              <img src="./assets/refresh.png" alt="刷新" @click="refreshImgCode" style="cursor: pointer">
            </div>
          </div>
          <div class="input-group input-group-lg msgcode">
                        <span class="input-group-addon" style="background-color: #fff;border-radius: 0px;"> <img
                          src="./assets/index/sms1.png" width="15"></span>
            <input type="text" id="msgCode" class="form-control" v-model="msgCode" placeholder="请输入短信验证码"
                   style="font-size: 16px;padding: 5px 10px;border-radius: 0px;">
            <button :class="{'getmsgcode':true,'disabled':msgStatus}" @click="getSMSCode" :disabled="msgStatus">
              {{msgText}}
            </button>
          </div>
          <div class="input-group input-group-lg">
            <span class="input-group-addon" style="background-color: #fff;border-radius: 0px;"><img
              src="./assets/index/password_login.png" width="13"> </span>
            <input type="text" id="password" v-model="password" class="form-control" placeholder="设置新密码"
                   style="font-size: 16px;padding: 5px 10px;border-radius: 0px;">
          </div>
          <button class="btn btn-warning" :disabled="serverIsTrue?false:true" type="button" @click="register">确定
          </button>
        </div>
      </div>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import API from './api'

  import Notify from './components/Notify'
  export default{
    name: 'forgetPwd',
    components: {
      Notify
    },
    data: function () {
      return {
        serverIsTrue: false,
        imgcodeUrl: '',
        telephone: '',
        imgCode: '',
        msgCode: '',
        password: '',
        notifyStatus: 2,
        msgStatus: true,
        msgText: '获取短信验证码'
      }
    },
    methods: {
      refreshImgCode: function () {
        this.valiCode()
      },
      getImgCode: function (url) {
        return API.imgcodeUrl + url.substring(url.indexOf('goldxianshang'))
      },
      valiCode: function () {
        this.$http.post(API.valiCode).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.imgcodeUrl = result.object
          } else {
          }
        }, (err) => {
          console.log(err)
        })
      },
      getSMSCode: function () {
        if (!this.telephone) {
          this.notifyStatus = '0|电话号码不能为空！'
          return
        }
        if (!this.imgCode) {
          this.notifyStatus = '0|图形验证码不能为空！'
          return
        }
        this.$http.post(API.getCYSmsCode, {
          'mobile': this.telephone,
          'forget': 'forget',
          'imgCode': this.imgCode,
          'imgUrl': this.imgcodeUrl
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            var i = 60
            var s = setInterval(() => {
              if (i === 0) {
                this.msgText = '重新发送'
                this.msgStatus = false
                clearInterval(s)
                return
              }
              this.msgText = '(' + i + 's)后重新发送'
              i--
            }, 1000)
            this.msgStatus = true
            this.msgSendStatus = true
          } else if (result.code === 0) {
            this.notifyStatus = '0|' + result.message
            this.refreshImgCode()
          }
        }, (err) => {
          console.log(err)
        })
      },
      register: function () {
        this.$http.post(API.forgetPwd, {
          'mobile': this.telephone,
          'code': this.msgCode,
          'newPassword': this.password,
          'imgCode': this.imgCode,
          'imgUrl': this.imgcodeUrl
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.$router.push('/login')
          } else if (result.code === 0) {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    watch: {
      telephone: function (newVal) {
        if (!this.msgSendStatus) {
          if (newVal && this.imgCode) {
            this.msgStatus = false
          }
        } else {
          if (newVal && this.imgCode && this.password) {
            this.serverIsTrue = true
          }
        }
      },
      msgCode: function (newVal, oldVal) {
        if (newVal !== '' && !/^[0-9]*[1-9][0-9]*$/.test(newVal)) {
          this.msgCode = oldVal
        }
      },
      imgCode: function (newVal) {
        if (!this.msgSendStatus) {
          if (newVal && this.telephone) {
            this.msgStatus = false
          }
        } else {
          if (newVal && this.telephone && this.password) {
            this.serverIsTrue = true
          }
        }
      },
      password: function (newVal) {
        if (newVal && this.telephone && this.imgCode) {
          this.serverIsTrue = true
        }
      }
    },
    mounted: function () {
      this.valiCode()
    }
  }
</script>

<style lang="scss">
  @import 'scss/register.scss';
</style>
